<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#2563eb">
    <title>豪华地产 - 户型列表</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/floor-plan-list.css">
</head>
<body class="bg-gray-50 text-gray-800">
    <div class="page min-h-screen pb-20">
        <!-- 顶部导航栏 -->
        <div class="sticky top-0 z-10 bg-white shadow-sm">
            <div class="flex items-center justify-between p-4">
                <a href="property-list.html" class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                </a>
                <h1 class="text-lg font-bold">户型列表</h1>
                <button class="text-gray-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                    </svg>
                </button>
            </div>
            
            <!-- 筛选选项卡 -->
            <div class="flex border-b border-gray-200 overflow-x-auto scrollbar-hide filter-tabs">
                <button class="flex-shrink-0 px-4 py-2 text-blue-600 border-b-2 border-blue-600 font-medium filter-tab active">全部户型</button>
                <button class="flex-shrink-0 px-4 py-2 text-gray-500 filter-tab">两室</button>
                <button class="flex-shrink-0 px-4 py-2 text-gray-500 filter-tab">三室</button>
                <button class="flex-shrink-0 px-4 py-2 text-gray-500 filter-tab">四室</button>
                <button class="flex-shrink-0 px-4 py-2 text-gray-500 filter-tab">别墅</button>
            </div>
            
            <!-- 高级筛选 -->
            <div class="flex p-2 bg-gray-50 text-sm text-gray-500 overflow-x-auto scrollbar-hide">
                <button class="flex items-center px-2 py-1 mr-2 bg-white rounded-full border border-gray-200 advanced-filter-button">
                    <span>面积</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </button>
                <button class="flex items-center px-2 py-1 mr-2 bg-white rounded-full border border-gray-200 advanced-filter-button">
                    <span>价格</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </button>
                <button class="flex items-center px-2 py-1 mr-2 bg-white rounded-full border border-gray-200 advanced-filter-button">
                    <span>朝向</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </button>
                <button class="flex items-center px-2 py-1 mr-2 bg-white rounded-full border border-gray-200 advanced-filter-button">
                    <span>楼盘</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </button>
                <button class="flex items-center px-2 py-1 bg-white rounded-full border border-gray-200 advanced-filter-button">
                    <span>更多</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </button>
            </div>
        </div>

        <!-- 户型列表 -->
        <div class="p-4 space-y-4">
            <a href="floor-plan-detail.html" class="block bg-white rounded-xl overflow-hidden card-shadow property-card">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="豪华四房" class="w-full h-48 object-cover">
                    <div class="absolute top-2 right-2 bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">120㎡</div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="text-base font-bold">豪华四房</h3>
                            <div class="text-xs text-gray-500 mt-0.5">御景豪庭</div>
                        </div>
                        <div class="text-blue-600 font-medium">536万起</div>
                    </div>
                    <div class="flex justify-between text-sm text-gray-500 mt-3">
                        <div class="flex flex-col items-center">
                            <span class="text-gray-400 text-xs">居室</span>
                            <span>4室2厅2卫</span>
                        </div>
                        <div class="flex flex-col items-center">
                            <span class="text-gray-400 text-xs">朝向</span>
                            <span>南北通透</span>
                        </div>
                        <div class="flex flex-col items-center">
                            <span class="text-gray-400 text-xs">得房率</span>
                            <span>85%</span>
                        </div>
                    </div>
                    <div class="flex space-x-2 mt-3">
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">双主卧</span>
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">中央空调</span>
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">飘窗</span>
                    </div>
                </div>
            </a>
            
            <a href="floor-plan-detail.html" class="block bg-white rounded-xl overflow-hidden card-shadow property-card">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="精致三房" class="w-full h-48 object-cover">
                    <div class="absolute top-2 right-2 bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">89㎡</div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="text-base font-bold">精致三房</h3>
                            <div class="text-xs text-gray-500 mt-0.5">御景豪庭</div>
                        </div>
                        <div class="text-blue-600 font-medium">298万起</div>
                    </div>
                    <div class="flex justify-between text-sm text-gray-500 mt-3">
                        <div class="flex flex-col items-center">
                            <span class="text-gray-400 text-xs">居室</span>
                            <span>3室2厅1卫</span>
                        </div>
                        <div class="flex flex-col items-center">
                            <span class="text-gray-400 text-xs">朝向</span>
                            <span>南北通透</span>
                        </div>
                        <div class="flex flex-col items-center">
                            <span class="text-gray-400 text-xs">得房率</span>
                            <span>88%</span>
                        </div>
                    </div>
                    <div class="flex space-x-2 mt-3">
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">南向阳台</span>
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">干湿分离</span>
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">观景阳台</span>
                    </div>
                </div>
            </a>
            
            <a href="floor-plan-detail.html" class="block bg-white rounded-xl overflow-hidden card-shadow property-card">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="简约两房" class="w-full h-48 object-cover">
                    <div class="absolute top-2 right-2 bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">78㎡</div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="text-base font-bold">简约两房</h3>
                            <div class="text-xs text-gray-500 mt-0.5">城市花园</div>
                        </div>
                        <div class="text-blue-600 font-medium">235万起</div>
                    </div>
                    <div class="flex justify-between text-sm text-gray-500 mt-3">
                        <div class="flex flex-col items-center">
                            <span class="text-gray-400 text-xs">居室</span>
                            <span>2室1厅1卫</span>
                        </div>
                        <div class="flex flex-col items-center">
                            <span class="text-gray-400 text-xs">朝向</span>
                            <span>东南向</span>
                        </div>
                        <div class="flex flex-col items-center">
                            <span class="text-gray-400 text-xs">得房率</span>
                            <span>86%</span>
                        </div>
                    </div>
                    <div class="flex space-x-2 mt-3">
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">开放厨房</span>
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">智能家居</span>
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">小区中庭</span>
                    </div>
                </div>
            </a>
            
            <a href="floor-plan-detail.html" class="block bg-white rounded-xl overflow-hidden card-shadow property-card">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="观景别墅" class="w-full h-48 object-cover">
                    <div class="absolute top-2 right-2 bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">260㎡</div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="text-base font-bold">观景别墅</h3>
                            <div class="text-xs text-gray-500 mt-0.5">湖景豪华公寓</div>
                        </div>
                        <div class="text-blue-600 font-medium">1280万起</div>
                    </div>
                    <div class="flex justify-between text-sm text-gray-500 mt-3">
                        <div class="flex flex-col items-center">
                            <span class="text-gray-400 text-xs">居室</span>
                            <span>5室3厅4卫</span>
                        </div>
                        <div class="flex flex-col items-center">
                            <span class="text-gray-400 text-xs">朝向</span>
                            <span>全明通透</span>
                        </div>
                        <div class="flex flex-col items-center">
                            <span class="text-gray-400 text-xs">得房率</span>
                            <span>90%</span>
                        </div>
                    </div>
                    <div class="flex space-x-2 mt-3">
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">私家花园</span>
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">观景露台</span>
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">地暖系统</span>
                    </div>
                </div>
            </a>
        </div>

        <!-- 底部固定按钮 -->
        <div class="sticky bottom-16 left-0 right-0 bg-white border-t border-gray-100 shadow-md z-10 px-4 py-3 flex justify-center">
            <a href="floor-plan-compare.html" id="compareBtn" class="compare-button">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
                户型对比
                <span class="compare-count">0</span>
            </a>
        </div>

        <!-- 底部导航 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-20 bottom-nav">
            <div class="grid grid-cols-5 h-16">
                <a href="index.html" class="flex flex-col items-center justify-center text-gray-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7m-7-7v14" />
                    </svg>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="property-list.html" class="flex flex-col items-center justify-center text-gray-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                    </svg>
                    <span class="text-xs mt-1">楼盘列表</span>
                </a>
                <a href="floor-plan-list.html" class="flex flex-col items-center justify-center text-blue-600">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
                    </svg>
                    <span class="text-xs mt-1">户型列表</span>
                </a>
                <a href="appointment.html" class="flex flex-col items-center justify-center text-gray-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                    <span class="text-xs mt-1">预约看房</span>
                </a>
                <a href="my.html" class="flex flex-col items-center justify-center text-gray-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </div>
    </div>

    <script src="js/main.js"></script>
    <script src="js/floor-plan-list.js"></script>
</body>
</html> 